<template>
  <div class="detail">
    <!-- 顶部首页 -->
    <div class="detail_top">
      <img class="top_left" @click="home" src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png" alt="">
      <div class="top_right">打开</div>
    </div>
    <!-- 头部内容 -->
    <div class="header">
      <div class="container">
        <!-- 左侧CD唱片 -->
        <div class="container_left">
          <div class="main">
            <img class="img" :src="baseUrl+headerInfo.albumDetailInfo?.albumInfo.cover" alt="">
          <div class="boutique">精品</div>
          <div class="count">
            <van-icon size="12" name="service" /> {{(headerInfo.albumDetailInfo?.statCountInfo.playCount/100000000).toFixed(2)}}亿
          </div>
          </div>
          <img class="cd" src="https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/listen_pic_album@3x_d18f4f7.png" alt="">
        </div>
        <!-- 右侧书籍信息 -->
        <div class="container_right">
          <div class="title">{{headerInfo.albumDetailInfo?.albumInfo.title}}</div>
          <div class="main">
            <img class="avatar" :src="baseUrl+personInfo.userInfo?.logo" alt="">
            <div class="text">{{ personInfo.userInfo?.nickname }}</div>
          </div>
          <div class="sub">已订阅{{ (headerInfo.albumDetailInfo?.statCountInfo.subscribeCount/10000).toFixed(2) }}万人</div>
        </div>
      </div>
    </div>
    <!-- 简介 -->
    <div class="blurb" :style="{height:200+'px'}" ref="blurb">
      <div class="blurb_desc" v-html="headerInfo.albumRichInfo?.richIntro
"></div>
      <div class="zzcblurb" v-show="blurbShow"></div>
      <svg @click="xlblurb" v-show="blurbShow" t="1692685567747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4154" width="16" height="32"><path d="M792.5 446.6L512 727.1 231.5 446.6c-11.7-11.7-30.7-11.7-42.4 0s-11.7 30.7 0 42.4l301.8 301.7c5.9 5.9 13.5 8.8 21.2 8.8 7.7 0 15.4-2.9 21.2-8.8L835 489c11.7-11.7 11.7-30.7 0-42.4-11.8-11.7-30.8-11.7-42.5 0zM490.8 577.4c5.9 5.9 13.5 8.8 21.2 8.8 7.7 0 15.4-2.9 21.2-8.8L835 275.7c11.7-11.7 11.7-30.7 0-42.4s-30.7-11.7-42.4 0L512 513.8 231.5 233.3c-11.7-11.7-30.7-11.7-42.4 0s-11.7 30.7 0 42.4l301.7 301.7z" fill="#f5624e" p-id="4155"></path></svg>
      <div class="openblurb">打开APP , 完整收听</div>
    </div>
    <!-- 节目 -->
    <div class="program">
      <div class="program_top">
        <div class="top_left">节目(144)</div>
        <div class="top_right" @click="reverse"><svg t="1692689531195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4919" width="16" height="16"><path d="M618.666667 157.866667l179.2 179.2-29.866667 29.866666-149.333333-149.333333v669.866667h-42.666667V115.2l42.666667 42.666667z m-213.333334 682.666666l-179.2-179.2 29.866667-29.866666 149.333333 149.333333V115.2h42.666667v763.733333l-42.666667-38.4z" fill="#8a8a8a" p-id="4920"></path></svg>切换顺序</div>
      </div>
      <!-- 节目单 -->
      <div class="program_item" v-for="(item,index) in programArr" :key="index">
        <svg t="1692690162726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7001" width="25" height="25"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z" fill="#8a8a8a" p-id="7002"></path><path d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z" fill="#8a8a8a" p-id="7003"></path></svg>
        <div class="item_center">{{item.trackInfo.title}}</div>
        <svg t="1692690267904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8073" width="20" height="20"><path d="M507.493 671.396c-19.395 0-37.647-7.526-51.37-21.201l-202.223-202.256c-7.65-7.65-11.863-17.822-11.863-28.639s4.212-20.99 11.863-28.639 17.821-11.861 28.639-11.861c10.817 0 20.99 4.21 28.639 11.861l196.302 196.321 196.348-196.321c7.65-7.65 17.821-11.861 28.639-11.861s20.99 4.21 28.639 11.861c15.794 15.794 15.794 41.484 0 57.283l-202.218 202.202c-13.707 13.706-31.956 21.25-51.395 21.25z" fill="#8a8a8a" p-id="8074"></path><path d="M507.499 663.33c-22.331 0-40.5-18.163-40.5-40.505v-514.196c0-22.334 18.163-40.505 40.5-40.505s40.505 18.164 40.505 40.505v514.196c0 22.337-18.164 40.505-40.505 40.505z" fill="#8a8a8a" p-id="8075"></path><path d="M207.55 984.711c-93.221 0-169.055-75.837-169.055-169.055v-471.348c0-93.22 75.837-169.055 169.055-169.055 22.331 0 40.5 18.163 40.5 40.5s-18.163 40.5-40.5 40.5c-48.556 0-88.052 39.5-88.052 88.052v471.348c0 48.551 39.499 88.052 88.052 88.052h599.901c48.551 0 88.052-39.5 88.052-88.052v-471.348c0-48.551-39.5-88.052-88.052-88.052-22.331 0-40.5-18.163-40.5-40.5s18.163-40.5 40.5-40.5c93.221 0 169.055 75.837 169.055 169.055v471.348c0 93.221-75.837 169.055-169.055 169.055h-599.901z" fill="#8a8a8a" p-id="8076"></path></svg>
      </div>
      <!-- 加载更多 -->
      <div class="program_more">
        <div @click="clickProgram" class="more">加载更多<svg t="1692690819538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9108" width="24" height="24"><path d="M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z" fill="#e8523e" p-id="9109"></path></svg></div>
      </div>
    </div>
    <!-- 主播信息 -->
    <div class="person">
      <div class="person_title">主播信息</div>
      <div class="person_bottom">
        <div class="head">
          <img class="head_img" :src="baseUrl+personInfo.userInfo?.logo" alt="">
          <div class="rank">V{{personInfo.userInfo?.anchorGrade}}</div>
        </div>
        <div class="person_center">
          <div class="person_center_top">{{personInfo.userInfo?.nickname}}</div>
          <div class="person_center_center">{{personInfo.userInfo?.personalSignature}}</div>
          <div class="person_center_bottom">
            <svg t="1692693802067" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11899" width="16" height="16"><path d="M512 1255.489906M499.719368 505.040975c48.099141-31.417949 79.926444-85.759744 79.926444-147.469918 0-97.01699-79.005397-176.022387-176.022387-176.022387-97.01699 0-176.022387 79.005397-176.022387 176.022387 0 61.607835 31.827304 115.94963 79.926444 147.469918-44.312612 14.736758-84.941035 39.605037-118.91745 73.581451-57.411953 57.411953-89.034579 133.756546-89.034579 214.911053 0 12.485309 10.029182 22.514491 22.514491 22.514491s22.514491-10.029182 22.514491-22.514491c0-142.762343 116.154307-258.91665 258.91665-258.91665s258.91665 116.154307 258.91665 258.91665c0 12.485309 10.029182 22.514491 22.514491 22.514491s22.514491-10.029182 22.514491-22.514491c0-81.154507-31.622626-157.499101-89.034579-214.911053C584.660404 544.748351 544.031981 519.777733 499.719368 505.040975zM272.630022 357.673396c0-72.251049 58.742355-130.993404 130.993404-130.993404 72.251049 0 130.993404 58.742355 130.993404 130.993404s-58.742355 130.993404-130.993404 130.993404C331.474715 488.6668 272.630022 429.924445 272.630022 357.673396zM828.942634 593.563862c-34.692784-51.06696-84.019988-90.160304-141.227264-112.367779 25.379972-37.762942 38.888667-82.280232 38.479312-128.230262-0.409354-55.876874-21.286428-109.39996-58.640016-150.744753-8.391765-9.210474-22.61683-9.926844-31.827304-1.535079-9.210474 8.391765-9.926844 22.61683-1.535079 31.827304 62.528883 68.976214 62.938237 173.56626 0.921047 243.258845-1.43274 1.637418-2.660804 3.479512-3.479512 5.321607-1.125725 1.739756-1.944433 3.684189-2.558465 5.8333-3.274835 11.973616 3.888867 24.356586 15.862483 27.631421C768.665201 547.71617 848.591645 664.177494 835.185289 791.282031c-1.330402 12.38297 7.675395 23.435539 20.058365 24.76594 0.818709 0.102339 1.637418 0.102339 2.353788 0.102339 11.359584 0 21.18409-8.596442 22.412153-20.160704C887.480312 724.864281 869.36638 652.920248 828.942634 593.563862z" fill="#8a8a8a" p-id="11900"></path></svg>
            <div class="person_center_bottom_count">{{(personInfo.statCountInfo?.followerCount/1000).toFixed(2)}}万</div>
          </div>
        </div>
        <div class="person_right">
          <svg t="1692691407532" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10223" width="28" height="28"><path d="M1002.303303 895.951287h-127.90299v127.923808h-85.35193v-127.882173h-127.90299v-85.35193h127.90299v-127.882173h85.35193v127.882173h127.90299v85.35193zM743.832677 638.542356l2.664646 42.63433h-16.52913a382.001932 382.001932 0 0 0-213.400643-83.624075c-8.431105 0.707796-16.903846 1.290688-25.522309 1.290688-8.972361 0-17.799-0.562074-26.563186-1.332323A384.166957 384.166957 0 0 0 115.330207 895.951287h501.70281v83.582439H21.651259a468.665368 468.665368 0 0 1 298.086412-434.732771 299.335465 299.335465 0 1 1 342.302876 0.187358 470.476494 470.476494 0 0 1 148.200096 93.554043h-66.407966z m-38.179375-338.888799a214.420703 214.420703 0 1 0-214.524791 214.420703 214.420703 214.420703 0 0 0 214.524791-214.420703z" fill="#e8523e" p-id="10224"></path></svg>
          <div class="care">加关注</div>
        </div>
      </div>
    </div>
    <!-- 往期作品 -->
    <div class="works">
      <div class="works_item" v-for="(item,index) in works.albumBriefDetailInfos" :key="item.id">
        <div class="main">
          <img class="img" :src="baseUrl+item.albumInfo?.cover" alt="">
          <div class="count">
            <van-icon size="12" name="play-circle-o" /> {{(item.statCountInfo?.playCount/10000).toFixed(2)}}万
          </div>
        </div>
        <div class="works_desc">{{item.albumInfo?.title}}</div>
      </div>
    </div>
    <!-- 用户评论 -->
    <div class="comment">
      <div class="comment_title">用户评论</div>
      <div class="comment_list" :style="{height:240+'px'}" ref="comment" >
        <div class="zzccomment" v-show="commentShow"></div>
        <svg @click="xlcomment" v-show="commentShow" t="1692685567747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4154" width="16" height="32"><path d="M792.5 446.6L512 727.1 231.5 446.6c-11.7-11.7-30.7-11.7-42.4 0s-11.7 30.7 0 42.4l301.8 301.7c5.9 5.9 13.5 8.8 21.2 8.8 7.7 0 15.4-2.9 21.2-8.8L835 489c11.7-11.7 11.7-30.7 0-42.4-11.8-11.7-30.8-11.7-42.5 0zM490.8 577.4c5.9 5.9 13.5 8.8 21.2 8.8 7.7 0 15.4-2.9 21.2-8.8L835 275.7c11.7-11.7 11.7-30.7 0-42.4s-30.7-11.7-42.4 0L512 513.8 231.5 233.3c-11.7-11.7-30.7-11.7-42.4 0s-11.7 30.7 0 42.4l301.7 301.7z" fill="#f5624e" p-id="4155"></path></svg>
        <div @click="moreComment" class="opencomment">查看更多评论</div>
        <div class="comment_item" v-for="(item,index) in comments" :key="item.id">
          
          <img class="comment_item_img" :src="baseUrl+item.smallHeader" alt="">
          <div class="comment_item_right">
            <div class="comment_right_top">{{item.nickname}}</div>
            <div class="comment_right_center">{{item.content}}</div>
            <div class="comment_right_bottom">
              <div class="comment_bottom_left">
                <div class="comment_hf">回复</div>
                <div class="comment_time">{{dayjs(item.createdAt).format('YYYY-MM-DD')}}</div>
              </div>
              <div class="comment_bottom_right">
                <div class="comment_count">{{item.likes}}</div>
                <van-icon size="16" @click="clickGood" :class="goodShow?'active':''" name="good-job-o" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 相似专辑 -->
    <div class="like">
      <div class="like_title">相似专辑</div>
      <div class="like_list">
        <div class="like_item" v-for="(item,index) in like.album?.docs" :key="item.albumId">
          <div class="main">
            <img class="img" :src="baseUrl+item.coverPath" alt="">
            <div class="count">
              <van-icon size="12" name="play-circle-o" /> {{Math.abs(item.playCount/10000).toFixed(2)}}万
            </div>
          </div>
          <div class="like_desc">{{item.intro}}</div>
        </div>
      </div>
      <div class="like_bottom">
        <div @click="changeLike" class="change">
          <svg t="1692705512032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13421" width="15" height="15"><path d="M935.005091 459.752727a34.909091 34.909091 0 1 1 49.361454 49.361455l-78.382545 78.382545a34.816 34.816 0 0 1-49.338182 0l-78.405818-78.382545a34.909091 34.909091 0 1 1 49.361455-49.361455l14.801454 14.824728C818.525091 311.738182 678.330182 186.181818 508.928 186.181818c-130.466909 0-250.484364 76.706909-305.710545 195.397818a34.932364 34.932364 0 0 1-63.301819-29.463272C206.522182 208.896 351.418182 116.363636 508.904727 116.363636c210.152727 0 383.534545 159.953455 404.992 364.474182l21.085091-21.085091z m-73.960727 189.021091a34.932364 34.932364 0 0 1 16.965818 46.382546C811.310545 838.353455 666.461091 930.909091 508.951273 930.909091c-210.106182 0-383.534545-159.953455-404.968728-364.497455l-21.108363 21.108364a34.909091 34.909091 0 1 1-49.384727-49.361455l78.42909-78.42909a34.909091 34.909091 0 0 1 49.338182 0l78.382546 78.42909a34.909091 34.909091 0 1 1-49.338182 49.338182l-14.824727-14.801454C199.354182 735.534545 339.549091 861.090909 508.951273 861.090909c130.490182 0 250.507636-76.706909 305.710545-195.397818a34.909091 34.909091 0 0 1 46.382546-16.919273z" fill="#ffffff" p-id="13422"></path></svg>
          <div class="change_title">换一批</div>
        </div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="love">
      <div class="love_title">猜你喜欢</div>
      <div class="love_item" v-for="(item,index) in loveArr" :key="item.albumId">
        <img class="love_item_left" :src="baseUrl+item.albumCoverPath" alt="">
        <div class="love_item_right">
          <div class="love_item_right_top">{{item.albumTitle}}</div>
          <div class="love_item_right_center">{{item.intro}}</div>
          <div class="love_item_right_bottom">
            <div class="love_item_right_bottom_box">
              <svg t="1692788133799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4011" width="16" height="16"><path d="M224 938.713333a53.58 53.58 0 0 1-53.333333-53.433333V138.72a53.333333 53.333333 0 0 1 80.886666-45.666667l618.666667 373.28a53.333333 53.333333 0 0 1 0 91.333334l-618.666667 373.28a53.16 53.16 0 0 1-27.553333 7.766666z m0.046667-810.666666a10.98 10.98 0 0 0-5.333334 1.42 10.466667 10.466667 0 0 0-5.38 9.253333v746.56a10.666667 10.666667 0 0 0 16.18 9.133333l618.666667-373.28a10.666667 10.666667 0 0 0 0-18.266666l-618.666667-373.28a10.386667 10.386667 0 0 0-5.446666-1.586667z" fill="#8a8a8a" p-id="4012"></path></svg>
              <div class="love_item_right_bottom_count">&nbsp;{{(item.albumPlayCount/10000).toFixed(2)}}万</div>
            </div>
            <div class="love_item_right_bottom_box">
              <svg t="1692788304730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7664" width="16" height="16"><path d="M725.333333 298.666667v469.333333h-42.666666V298.666667h42.666666zM384 298.666667v469.333333H341.333333V298.666667h42.666667z m-170.666667 128v213.333333H170.666667v-213.333333h42.666666z m682.666667 0v213.333333h-42.666667v-213.333333h42.666667z m-341.333333-256v725.333333h-42.666667V170.666667h42.666667z" fill="#8a8a8a" p-id="7665"></path></svg>
              <div class="love_item_right_bottom_count">&nbsp;{{item.albumTrackCount}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div @click="moreLove" class="love_more">查看更多></div>
      </div>
    </div>
    <!-- 版权 -->
    <div class="footer">
      <img class="footer_top" src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png" alt="">
      <div class="copyright">© 2014-2023 喜马拉雅 版权所有</div>
    </div>
    <!-- app内打开 -->
    <div v-if="appShow" class="app">APP内打开</div>
  </div>
</template>

<script setup lang="ts">
//引入vue相关
import { ref,onMounted,onBeforeUnmount } from 'vue'
//引入api请求
import { reqHeader,reqProgram,reqPerson,reqWorks,reqComment,reqLike,reqLove } from '@/api/detail/index'
//引入dayjs 
import dayjs from 'dayjs';
//引入路由相关
import { useRoute,useRouter } from 'vue-router';
//创建路由器
let route = useRoute()
//创建路由
let router = useRouter()


//定义响应式数据
//接收其他组件传来的id
let id = ref<any>(route.params.id)
//控制app的显示
let appShow = ref<any>(false)
//图片基础路径
let baseUrl = ref<any>('https://imagev2.xmcdn.com/')
//头部和内容简介
let headerInfo = ref<any>({})
//简介模块
let blurb = ref()
//简介遮罩层
let blurbShow = ref<any>(true) 
//节目数据
let programInfo = ref<any>([])
//节目单数据
let programArr = ref<any>([])
//节目当前页
let programPage = ref<any>(1)
//主播信息
let personInfo = ref<any>({})
//往期作品
let works = ref<any>([])
//用户评论
let comments = ref<any>([])
//评论模块
let comment = ref()
//评论当前页
let commentPage = ref<any>(1)
//评论遮罩层
let commentShow = ref<any>(true)
//控制评论点赞
let goodShow = ref<any>(false)
//相似专辑数据
let like = ref<any>({})
//相似当前页
let likePage = ref<any>(1)
//猜你喜欢数据
let loveArr = ref<any>([])
//猜你喜欢当前页
let lovePage = ref<any>(1)


//定义方法
//回到首页
const home = ()=>{
  router.push({
    name: 'Home'
  })
}
//获取头部和内容简介
const getHeader = async ()=>{
  let result = await reqHeader(id.value)
  // console.log(result.data);
  //存头部和内容简介
  Object.assign(headerInfo.value,result.data)
  //获取主播信息
  getPerson()
  //获取往期作品
  getWorks()
  //获取相似专辑
  getLike()
}
//简介下拉事件
const xlblurb = ()=>{
  //清除高度
  blurb.value.style = ''
  //隐藏遮罩层与下拉图标
  blurbShow.value = false
}
//获取节目内容
const getProgram = async ()=>{
  let data = {
    albumId: id.value,
    page: programPage.value,
    pageSize: 10,
    asc: true,
    countKeys: 'play',
    v: Math.random()
  }
  let result = await reqProgram(data)
  // console.log(result.data);
  programInfo.value = result.data 
  programArr.value.push(...result.data.trackDetailInfos) 
}
//翻转节目内容
const reverse = ()=>{
  programArr.value.reverse()
}
//加载更多节目
const clickProgram = ()=>{
  programPage.value++
  getProgram()
}
//获取主播信息
const getPerson = async ()=>{
  let result = await reqPerson(headerInfo.value.anchorId)
  // console.log(result);
  Object.assign(personInfo.value,result.data)
}
//获取往期作品
const getWorks = async ()=>{
  let data = {
    anchorId: headerInfo.value.anchorId,
    page:1,
    pageSize:3,
    asc:false
  }
  let result = await reqWorks(data)
  // console.log(result.data);
  works.value = result.data
  // console.log(works.value );
}
//获取用户评论
const getComment = async ()=>{
  let data = {
    albumId: id.value,
    page: commentPage.value,
    pageSize: 10,
  }
  let result = await reqComment(data)
  // console.log(result);
  comments.value = comments.value.concat(result.data.comments)
  // console.log(999,comments.value,result.data.comments);
  
}
//下拉显示评论事件
const xlcomment = ()=>{
  //清除高度
  comment.value.style = ''
  //隐藏遮罩层与下拉图标
  commentShow.value = false
}
//查看更多评论事件
const moreComment = ()=>{
  commentPage.value++
  getComment()
}
//点赞的回调(一点全变色)
const clickGood = ()=>{
  goodShow.value = !goodShow.value
}
//获取相似专辑
const getLike = async ()=>{
  let data = {
    kw: headerInfo.value.albumDetailInfo.albumInfo.title,
		page: likePage.value,
		rows: 6,
		device: 'iPhone',
		condition: 'relation',
		spellchecker: true,
		core: 'album',
  }
  // console.log(data);
  let result = await reqLike(data)
  // console.log(result);
  Object.assign(like.value,result.data)
}
//换一批相似专辑
const changeLike = ()=>{
  likePage.value++
  getLike()
}
//获取猜你喜欢
const getLove = async ()=>{
  let data = {
    pageNum: lovePage.value,
    pageSize: 5,
    sort: 1,
  }
  let result = await reqLove(data)
  // console.log(result.data);
  loveArr.value.push(...result.data.albums)
}
//更多猜你喜欢
const moreLove = ()=>{
  lovePage.value++
  getLove()
}
//页面高度控制app按钮显示与隐藏
const handler = ()=>{
  if(document.documentElement.scrollTop<500){
    appShow.value = false
  }else{
    appShow.value = true
  }
}


//生命周期钩子
//页面挂载
onMounted(()=>{
  //获取头部和内容简介
  getHeader()
  //获取节目内容
  getProgram()
  //获取用户评论
  getComment()
  //获取猜你喜欢
  getLove()
  //监听页面高度
  window.addEventListener('scroll', handler);
})
//组件即将卸载之前
onBeforeUnmount(()=>{
  //清除监听事件
  window.removeEventListener('scroll',handler);
})


defineOptions({
    name: "Detail",
});
</script>

<style scoped lang="less">
.detail{
  width: 100%;
  /* 顶部 */
  .detail_top{
    width: 100%;
    height: 60px;
    line-height: 60px;
    align-items: center;
    padding: 10px 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background-color: rgb(76, 77, 79);
    .top_left{
      width: 102px;
    }
    .top_right{
      width: 58px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      font-size: 15px;
      cursor: pointer;
      background: #f86442;
      border: 1px solid #f86442;
      color: #fff;
      border-radius: 20px;
    }
  }
  /* 头部内容  */
  .header{
    width: 100%;
    padding: 30px 20px 20px;
    box-sizing: border-box;
    background-color: #7a7a7a;
    .container{
      width: 100%;
      display: flex;
      /* 左侧CD */
      .container_left{
        width: 30%;
        margin-right: 20px;
        .main{
          .img{
            width: 95px;
            height: 95px;
            border-radius: 6px;
          }
          .boutique{
            position: absolute;
            top: 90px;
            left: 20px;
            padding: 2px;
            box-sizing: border-box;
            border-radius: 6px 0 6px 0;
            background-color: gold;
            color: white;
            font-size: 10px;
          }
          .count{
            position: absolute;
            top: 165px;
            left: 22px;
            color: #fff;
            font-size: 12px;
            font-weight: 900;
          }
        }
        .cd{
          height: 95px;
          position: absolute;
          top: 90px;
          left: 115px;
        }

      }
      /* 右侧数据信息 */
      .container_right{
        .title{
          font-size: 18.5px;
          color: white;
        }
        .main{
          display: flex;
          align-items: center;
          padding: 10px 0;
          box-sizing: border-box;
          border-bottom: 1px solid #ccc;
          .avatar{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 5px;
          }
          .text{
            color: white;
            font-size: 12px;
          }
        }
        .sub{
          color: white;
          margin-top: 8px;
          font-size: 12px;
        }
      }
    }
  }
  /* 简介 */
  .blurb{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    /* 渐变遮罩层 */
    .zzcblurb{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, #fffffffb 63%, #ffffff 100%);
    }
    .icon{
      position: absolute;
      top: 110px;
      left: 179.5px;
    }
    .openblurb{
      animation: zoom 1s infinite;
      position: absolute;
      bottom: 2px;
      left: 72.6px;
      color: #fff;
      font-size: 15px;
      padding: 11px 48px;
      border-radius: 40px;
      background:  linear-gradient(to right, rgb(240, 139, 85), #f2561d);
    }
  }
  /* 节目 */
  .program{
    width: 100%;
    padding: 10px 16px;
    box-sizing: border-box;
    .program_top{
      display: flex;
      justify-content: space-between;
      .top_left{
        font-size: 18px;
        font-weight: 900;
      }
      .top_right{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #8a8a8a;
      }
    }
    .program_item{
      width: 100%;
      padding: 12px 10px 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .item_center{
        width: 85%;
        font-size: 16px;
      }
    }
  }
  /* 加载更多 */
  .program_more{
    width: 100%;
    padding: 14px 0;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 800;
    color: #f86442;
    display: flex;
    justify-content: center;
    .more{
      display: flex;
    }
  }
  /* 主播信息 */
  .person{
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    .person_title{
      font-size: 18px;
      font-weight: 900;
    }
    .person_bottom{
      padding: 10px 0;
      display: flex;
      position: relative;
      justify-content: space-between;
      align-items: center;
      .head{
        width: 20%;
        .head_img{
          width: 55px;
          height: 55px;
          border-radius: 50%;
        }
        .rank{
          position: absolute;
          text-align: center;
          top: 55px;
          left: 14px;
          font-size: 14px;
          width: 32px;
          height: 15px;
          line-height: 17px;
          color: #fff;
          background-color: rgb(123, 235, 255);
          border-radius: 6px;
        }
      }
      .person_center{
        width: 65%;
        .person_center_top{
          font-size: 16px;
        }
        .person_center_center{
          font-size: 12px;
          color: #8a8a8a;
          margin: 3px 0;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .person_center_bottom{
          font-size: 12px;
          color: #8a8a8a;
          display: flex;
        }
      }
      .person_right{
        display: flex;
        flex-direction: column;
        align-items: center;
        .care{
          font-size: 12px;
          color: #e8523e;
        }
      }
    }
  }
  /* 往期作品 */
  .works{
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .works_item{
      position: relative;
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .main{
        .img{
          width: 95px;
          height: 95px;
          border-radius: 6px;
        }
        .count{
          position: absolute;
          top: 75px;
          left: 9px;
          color: #ffffff;
          font-size: 12px;
        }
      }
      .works_desc{
        font-size: 14px;
        display: -webkit-box; /* 使用弹性盒子布局 */
        -webkit-line-clamp: 2; /* 限制显示的行数 */
        -webkit-box-orient: vertical; /* 设置为垂直方向布局 */
        overflow: hidden; /* 隐藏超出的部分文本 */
        text-overflow: ellipsis; /* 超出文本显示。。。 */
        letter-spacing: 1px; /* 字与字间距 */
      }
    }
  }
  /* 用户评论 */
  .comment{
    width: 100%;
    padding: 12px;
    box-sizing: border-box; 
    margin-bottom: 10px;
    .comment_title{
      font-size: 18px;
      font-weight: 900;
    }
    .comment_list{
      width: 100%;
      overflow: hidden;
      position: relative;
      padding-bottom: 40px;
      .zzccomment{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, #fffffffb 73%, #ffffff 100%);
      }
      .icon{
        position: absolute;
        bottom: 35px;
        left: 167.63px;
        z-index: 2;
      }
      .opencomment{
        z-index: 2;
        position: absolute;
        bottom: 2px;
        left: 130.65px;
        color: #f2561d;
        font-size: 15px;
      }
      .comment_item{
        padding: 10px 0;                                            
        display: flex;
        position: relative;
        justify-content: space-between;
        .comment_item_img{
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .comment_item_right{
          width: 90%;
          .comment_right_top{
            font-size: 14px;
            color: #888888;
          }
          .comment_right_center{
            font-size: 14px;
            margin: 5px 0;
            line-height: 1.6;
          }
          .comment_right_bottom{
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            .comment_bottom_left{
              display: flex;
              justify-content: space-between;
              align-items: center;
              .comment_hf{
                color: #414141;
                margin-right: 5px;
              }
              .comment_time{
                color: #888888;
              }
            }
            .comment_bottom_right{
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #888888;
              .comment_count{
                font-size: 12px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  /* 相似专辑 */
  .like{
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    margin-bottom: 10px;
    .like_title{
      font-size: 18px;
      font-weight: 900;
    }
    .like_list{
      width: 100%;
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .like_item{
        position: relative;
        margin-bottom: 15px;
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .main{
          .img{
            width: 95px;
            height: 95px;
            border-radius: 6px;
          }
          .count{
            position: absolute;
            top: 75px;
            left: 9px;
            color: #ffffff;
            font-size: 12px;
          }
        }
        .like_desc{
          font-size: 14px;
          display: -webkit-box; /* 使用弹性盒子布局 */
          -webkit-line-clamp: 2; /* 限制显示的行数 */
          -webkit-box-orient: vertical; /* 设置为垂直方向布局 */
          overflow: hidden; /* 隐藏超出的部分文本 */
          text-overflow: ellipsis; /* 超出文本显示。。。 */
          letter-spacing: 1px; /* 字与字间距 */
        }
      }
    }
    .like_bottom{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .change{
        display: flex;
        align-items: center;
        font-size: 13px;
        padding: 6px 10px;
        box-sizing: border-box;
        border-radius: 40px;
        background-color: red ;
        .change_title{
          color: #fff;
        }
      }
    }
    
  }
  /* 猜你喜欢 */
  .love{
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    .love_title{
      font-size: 18px;
      font-weight: 900;
    }
    .love_item{
      display: flex;
      padding: 16px 0;
      box-sizing: border-box;
      border-bottom: 1px solid #dbdbdb;
      .love_item_left{
        width: 70px;
        height: 70px;
        margin-right: 12px;
        border-radius: 5px;
      }
      .love_item_right{
        width: 75%;
        .love_item_right_top{
          font-size: 16px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .love_item_right_center{
          font-size: 12px;
          color: #8a8a8a;
          margin: 9px 0;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .love_item_right_bottom{
          font-size: 12px;
          color: #8a8a8a;
          display: flex;
          align-items: center;
          .love_item_right_bottom_box{
            display: flex;
            margin-right: 10px;
            align-items: center;
          }
        }
      }
    }
    .box{
      width: 100%;
      display: flex;
      justify-content: center;
      .love_more{
        margin: 20px 0;
        color: red;
        font-size: 14px;
        font-weight: 900;
      }
    }
  }
  /* 版权 */
  .footer{
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ccc;
    .footer_top{
      width: 100px;
      margin: 30px 0;
    }
    .copyright{
      font-size: 12px;
      color: #9c9c9c;
    }
  }
  /* app内打开 */
  .app{
    position: fixed;
    z-index: 3;
    bottom: 20px;
    left: 137px;
    color: #fff;
    font-size: 13px;
    padding: 7.5px 18px;
    border-radius: 40px;
    background:  linear-gradient(to right, rgb(240, 139, 85), #f2561d);
  }
}

.active{
  color: #f2561d
}

//放大动画
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}
</style>

<style>
.emoji {
  position: relative;
  top: 2px;
  width: 16px;
  height: 16px;
}

.blurb_desc img {
  width: 100%;
}
</style>